<template>
	<view class="container">
		<view @tap="tapToDo"  class="todo"></view>
	</view>
	<!-- <view class="todo">
		<view class="todo-wrap">
			<view class="todo-icon">
				<text :style="{color:theme}">{{title[0]}}{{title[1]}}</text><br>
				<text class="t2">{{title[2]}}{{title[3]}}</text>
			</view>
			<swiper class="swiper" :autoplay="autoplay" :interval="interval" :vertical="vertical" :circular="circular">
				<swiper-item class="swiper-item" v-for="(list,index) in metaData.list" :key="index">
					<view class="todo-content" @tap="tapToDo">
						<view class="todo-item" v-for="(item,index2) in list" :key="index2">
							<text class="title">{{item.todoTitle}}</text>
							<text class="context">{{item.todotext}}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view> -->
</template>

<script>
	export default {
		props: {
			metaData: {
				type: Object,
				default: function() {
					return {};
				}
			},
			theme: {
				type: String,
				default: "#4a96f2;"
			}
		},
		computed: {
			title() {
				return this.metaData.title;
			}
		},
		data() {
			return {
				autoplay: true,
				interval: 3000,
				circular: true,
				vertical: true
			}
		},
		methods: {
			tapToDo() {
				uni.navigateTo({
					url: "/pages/tabbar/study/practice/list"
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.swiper {
		height: 120upx;
		width: 555upx;
	}

	.swiper-item {
		padding: 25upx 0;
	}
	.container{
		padding: 15px 6px;
		margin: 0 auto;
		width: 710upx;
		height: 120upx;
	}
	.todo {
		// padding: 50upx 0;
		width: 726upx;
		height: 120upx;
		margin: 0 auto;
		background-image: url(../../../../../static/img/daiban.png); 
		background-size: 100% 100%;
		position: relative;
		
		// background-size: 100% 100%;
		// background-image: url(../../../../../static/img/daiban.png);
		// background-repeat:no-repeat;

		&-wrap {
			width: 710upx;
			height: 120upx;
			margin: 0 auto;
			background-color: #ffffff;
			box-shadow: 0px 4px 20px 0px rgba(153, 153, 153, 0.15);
			border-radius: 8upx;
			border: solid 1px #f7f7f7;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			font-size: 24upx;
			align-items: center;
			padding: 0 20upx;
		}

		&-icon {
			margin-right: 18upx;
			font-size: 36upx;
			line-height: 40upx;
			color: #4a96f2;
			font-weight: 700;

			.t1 {
				color: #4a96f2;
			}

			.t2 {
				color: #f1685d;
			}
		}

		&-content {
			width: 555upx;
		}

		&-item {
			.title {
				display: inline-block;
				font-size: 20upx;
				color: #ffffff;
				width: 120upx;
				height: 34upx;
				line-height: 34upx;
				background-color: #f1685d;
				border-radius: 18upx;
				text-align: center;
				margin-right: 10upx;
				vertical-align: middle;
			}

			.context {
				display: inline-block;
				font-size: 28upx;
				color: #333333;
				width: 425upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				vertical-align: middle;
			}
		}
	}
</style>
